<template>
  <div>
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        按最新时间
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item  command="按最新时间">按最新时间</el-dropdown-item>
          <el-dropdown-item command="按订单编号">按订单编号</el-dropdown-item>
          <el-dropdown-item command="按订单金额">按订单金额</el-dropdown-item>
          <el-dropdown-item command="按评分">按评分</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
import {
  ElDropdownItem,
  ElDropdownMenu,
  ElDropdown,
  ElIcon,
} from "element-plus";

import { ArrowDown } from "@element-plus/icons-vue";
// import {onbeforeUpdate} from "vue"
export default {
  setup() {
    const handleCommand = function (command) {
      document.querySelector(".el-dropdown-link").childNodes[0].nodeValue=command;
    };
    return {
      handleCommand,
    };
  },
  components: {
    ElDropdownItem,
    ElDropdownMenu,
    ElDropdown,
    ElIcon,
    ArrowDown,
  },
};
</script>

<style lang="less" scoped></style>
